<template>
  <!--  <div>-->
  <!--    系统概览:-->
  <!--    <br />-->
  <!--    项目总数：{{this.projectTotal}}-->
  <!--    网关总数：{{this.gatewayTotal}}-->
  <!--    在线网关总数：{{this.onlineGatewayTotal}}-->
  <!--  </div>-->
  <div class="app-container">


    <el-descriptions title="项目概览" direction="vertical" :column="2" border>
      <el-descriptions-item label="网关总数">{{this.gatewayTotal}}</el-descriptions-item>
      <el-descriptions-item label="在线网关">{{this.onlineGatewayTotal}}</el-descriptions-item>
      <el-descriptions-item label="信息点总数">{{this.sensorTotal}}</el-descriptions-item>
      <el-descriptions-item label="控制点总数">{{this.loopTotal}}</el-descriptions-item>
      <el-descriptions-item label="项目总数">{{this.projectTotal}}</el-descriptions-item>
    </el-descriptions>


<!--    <div class="level1">-->
<!--      <div class="left">-->
<!--        <div class="left-1">-->


<!--&lt;!&ndash;          <chart1 />&ndash;&gt;-->
<!--        </div>-->
<!--        <div class="left-2">-->
<!--          <div class="left-2-1">-->
<!--            <div class="sensor-total-title">-->
<!--              信息点总数-->
<!--            </div>-->
<!--            <div class="loop-total-title">-->
<!--              控制点总数-->
<!--            </div>-->
<!--            <div class="project-total-title">-->
<!--              项目总数-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="left-2-2">-->
<!--            <div>-->

<!--            </div>-->
<!--            <div>-->

<!--            </div>-->
<!--            <div>-->
<!--              {{this.projectTotal}}-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="right"></div>-->
<!--    </div>-->

<!--    <div class="level2">-->
<!--      <div class="left">-->
<!--&lt;!&ndash;        信息点总数：{{this.sensorTotal}} <br />&ndash;&gt;-->
<!--&lt;!&ndash;        控制点总数：{{this.loopTotal}} <br />&ndash;&gt;-->
<!--&lt;!&ndash;        项目总数：{{this.projectTotal}}&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="middle">-->
<!--      </div>-->
<!--      <div class="right">-->
<!--      </div>-->
<!--    </div>-->

  </div>

</template>

<script>
import {projectOverview, gatewayOverview, sensorOverview, loopOverview} from '@/api/system/companyOverview'
import chart1 from "../../charts/chart1"

export default {
  name: "index",
  components: {
    chart1
  },
  data() {
    return {
      projectTotal: null,
      sensorTotal: null,
      loopTotal: null,
      gatewayTotal: null,
      onlineGatewayTotal: null
    }
  },
  mounted() {
    this.selectProjectTotal()
    this.selectSensorTotal()
    this.selectLoopTotal()
    this.selectGatewayTotal()
  },
  methods: {
    selectProjectTotal() {
      projectOverview().then(response => {
        this.projectTotal = response.data
      })
    },
    selectSensorTotal() {
      sensorOverview().then(response => {
        this.sensorTotal = response.data
      })
    },
    selectLoopTotal() {
      loopOverview().then(response => {
        this.loopTotal = response.data
      })
    },
    selectGatewayTotal() {
      gatewayOverview().then(response => {
        this.gatewayTotal = response.data.gatewayTotal
        this.onlineGatewayTotal = response.data.onlineGatewayTotal
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .level1 {
    display: flex;
    width: 100%;
    div {
      border-radius: 10px;
      background: #FFFFFF;
      width: 100%;
    }
    .left {
      margin-right: 20px;
      min-width: 45%;
      display: flex;
      .left-1 {}
      .left-2 {
        display: flex;
        flex-direction: column;
        .left-2-1 {
          display: flex;
          height: 100%;
          justify-content:center;
          align-items:center;
          text-align: center;
          font-size: 20px;
        }
        .left-2-2 {
          display: flex;
          height: 100%;
          justify-content:center;
          align-items:center;
          text-align: center;
          font-size: 20px;
        }
      }
    }
    .right {
      min-width: 45%;
    }
  }

  .level2 {
    margin-top: 30px;
    display: flex;
    width: 100%;
    height: 100%;

    div {
      border-radius: 10px;
      background: #FFFFFF;
      height: 300px;
      flex: 1
    }

    .middle {
      margin-left: 20px;
      margin-right: 20px;
    }

  }

}
</style>
